<template>
  <div class="accountReview">
    <el-row>

      <!-- 编辑弹框 -->
      <el-dialog title="审核编辑"
                 :visible.sync="dialogFormVisible">
        <el-col :span="24">
          <el-form :model="formModify"
                   label-width="120px">
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="单位类型">
                  <el-select v-model="formModify.region"
                             placeholder="请选择活动区域">
                    <el-option label="区域一"
                               value="shanghai"></el-option>
                    <el-option label="区域二"
                               value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属公司">
                  <el-select v-model="formModify.region"
                             placeholder="请选择活动区域">
                    <el-option label="区域一"
                               value="shanghai"></el-option>
                    <el-option label="区域二"
                               value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="管理员用户名">
                  <el-input v-model="formModify.name"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="权限模板">
                  <el-select v-model="formModify.region"
                             placeholder="请选择活动区域">
                    <el-option label="区域一"
                               value="shanghai"></el-option>
                    <el-option label="区域二"
                               value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="管理员昵称">
                  <el-input v-model="formModify.name"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="真实姓名">
                  <el-input v-model="formModify.name"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="工种">
                  <el-input v-model="formModify.name"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="formModify.name"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-col>

          </el-form>
        </el-col>

        <div style="text-align:center;">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <el-col :span="24"
              class="accountReview-top"
              align="right">
        <el-form v-model="formUser"
                 label-width="80px">
          <el-col :span="24"
                  alight="right">
            <!-- <el-form-item label="真实姓名"
                          class="col-2">

            </el-form-item> -->
            <el-input v-model="formUser.name"
                      class="col-2"
                      placeholder="请输入真实姓名或手机号"></el-input>
            <el-select v-model="formUser.status"
                       class="col-2"
                       placeholder="请选择"
                       @change="onStatusChange">
              <el-option label="全部"
                         value="0"></el-option>
              <el-option v-for="(item) in arrOptions"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">

              </el-option>
            </el-select>
            <!-- <el-form-item label="审核状态"
                          class=" col-2">

            </el-form-item> -->
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-col>

        </el-form>
        <!-- <el-input placeholder="管理员用户名"
                  class="col-3"
                  v-model="username"
                  place="请输入管理员用户名"></el-input> -->

      </el-col>
      <el-col :span="24"
              class="accountReview-mid">
        <el-table :highlight-current-row='true'
                  border
                  height="700"
                  :header-cell-style="{background:'#f5f5f5'}"
                  :data='tableData'>
          <el-table-column type="index"
                           label='编号'
                           align="center"
                           width="55">
          </el-table-column>
          <el-table-column prop='user_name'
                           label='申请人'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='phone'
                           label='手机号'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='company_name'
                           label='申请单位'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='job_name'
                           label='岗位'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='状态'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- 审核状态（1：待审核，2：审核通过，3：审核拒绝） -->
              <span>{{scope.row.status==1?'待审核':scope.row.status==2?'审核通过':scope.row.status==3?'审核拒绝':''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop='reg_date'
                           label='申请时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='操作'
                           align='center'>
            <template slot-scope="scope">
              <el-button size="mini"
                         type="primary"
                         @click="onEdit(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination @current-change='handlePageChange'
                       next-text="下一页"
                       :current-page='page'
                       :page-size='pageSize'
                       @size-change="handleSizeChange"
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='total'
                       align='center'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { AccountReviewApi } from '@/services/AccountReview'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      formUser: {
        name: '',
        status: '0'
      },
      arrOptions: [],
      formModify: {
        name: '',
        region: ''
      },
      dialogFormVisible: false,
      username: '',
      page: 1,
      pageSize: 10,
      tableData: [],
      total: 0
    }
  },
  methods: {
    // 审核状态
    onStatusChange (val) {
      this.formUser.status = val
    },
    // 编辑
    onEdit (row) {
      // this.dialogFormVisible = true;
      if (row.user_type == 3) {
        this.$router.push({ path: '/auditInformation', query: { user_type: row.user_type, user_reg_id: row.user_reg_id, company_name: row.company_name, status: row.status } })
        console.log('编辑row=', row)
      } else {
        this.$router.push({ path: '/personnelAudit', query: { user_reg_id: row.user_reg_id, status: row.status } })
      }
    },
    handlePageChange (val) {
      this.page = val
      this.getAccountReview()
    },
    // 每页显示的条数
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.getAccountReview()
    },
    // 查询
    onSearch () {
      // 获取信息
      this.getAccountReview()
    },
    // 重置
    onReset () {
      this.formUser.name = ''
      this.formUser.status = '0'
      this.page = 1
      this.pageSize = 10
      this.getAccountReview()
    },
    // 获取信息
    getAccountReview () {
      AccountReviewApi.getAccountList({
        data: {
          search_word: this.formUser.name,
          status: this.formUser.status,
          is_page: 1,
          page: this.page,
          page_size: this.pageSize
        }
      }).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total_count
        // console.log('帐号信息res', res, this.tableData)
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取审核状态的标准码
    getStandardCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'regUserStatus0'
        }
      }).then((res) => {
        this.arrOptions = res.data.list
        console.log('标准码=', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    // 获取审核状态的标准码
    this.getStandardCode()
    // 获取信息
    this.getAccountReview()
  },
  mounted () { }
}
</script>

<style lang="scss" scoped>
.status-class {
  padding-left: 5px !important;
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-form-item__content {
  margin: 0 !important;
  width: 100% !important;
}
/deep/ .el-select {
  display: inline-block;
  position: relative;
  // width: 100% !important;
}
.accountReview {
  padding: 20px;
  .accountReview-top {
    margin-bottom: 20px;
  }
  .accountReview-mid {
    margin-bottom: 20px;
  }
}
</style>
